<template>
	   <div>
			 <div class="modal">
				 <div id="box">
					 <div class="box-tuo"  v-drag>拖动快</div>
					 <div class="box-mn"  v-stopdrag>
						 
						 
						 ssssssss
					 </div>
					 
				 </div>
				 
				 
			 </div>
			dragss
		 </div>
</template>

<script>
import {mapGetters,mapState, mapMutations, mapActions} from 'vuex'
import sceollcom from '@/components/sceollcom/sceollcom.vue'

import axios from 'axios'

export default {
	name:"drag",
	 props: {
	  list:{
	    type: Array,
	    default:function(){
				return []
			}
	  }
	},
	created () {

	},
	methods: {

	},
	computed:{
	
	},
	directives: {/*自定义拖拽*/
		drag:{
			inserted:function(el,binding,vnode){
				var odiv=document.getElementById("box");
						odiv.onmousedown=function(e){//鼠标按下的瞬间
						var e = e || window.event; //兼容ie浏览器
						//鼠标在方块内的距离=鼠标浏览器的距离-方块离浏览器的距离
						var diffX=e.clientX-odiv.offsetLeft;
						var diffY = e.clientY - odiv.offsetTop;
						// console.log("e.clientX",e.clientX+"=="+odiv.offsetLeft+"=="+diffx)
						//Window innerWidth  返回窗口的文档显示区的宽度。
						document.onmousemove=function(e){
							var e = e || window.event; //兼容ie浏览器
							var left = e.clientX - diffX;
							var top = e.clientY - diffY;
						  if(left<0){
								left=0
							}else if(left>window.innerWidth-odiv.offsetWidth){
								left = window.innerWidth - odiv.offsetWidth;
							}
							if(top < 0) {
                  top=0;
							} else if(top > window.innerHeight - odiv.offsetHeight) {
                  top = window.innerHeight - odiv.offsetHeight;
							}
							//移动时重新得到物体的距离，解决拖动时出现晃动的现象
                odiv.style.left = left + 'px';
                odiv.style.top = top + 'px';
						}
						document.onmouseup=function(){
							document.onmouseup="";
							document.onmousemove="";
						}
						return false;
					}
			}
			
		}
		, /*阻止拖拽*/
		stopdrag:{
			inserted:function(el,binding,vnode){
				let element = el;
				element.onmousedown=function(e){
					e.stopPropagation()
				}
			}
		}	
		
	},
	watch:{
		
	},
	components:{
	
  }
	
}

</script>

<style  scoped >
	.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    font-family: Microsoft YaHei!important;
    z-index: 999;
}
#box{
    position: absolute;
    top: 12%;
    left: 30%;
    width: 1000px;
    background: rgba(57,64,64,.95);
    margin: 0 auto;
		min-height: 300px;
		border: 1px solid gold;
}
.box-tuo{
	height: 35px;
	width: 100%;
	cursor: move;
	background:royalblue;
}

.box-mn{
		height: 265px;
	width: 100%;
	cursor: move;
	background:violet;
}
</style>

